<template>
  <div class="henan-login-web white">
    <header>
      <div class="logo">
        <h1>河南省营商环境问卷调查管理系统</h1>
        <p>Henan Business Environment Questionnaire Management System</p>
      </div>
    </header>
    <main :style="`height: calc(100vh - ${headerHeight}px - ${footerHeight}px)`">
      <div class="login">
        <el-tabs v-model="activeTag">
          <el-tab-pane label="用户名/密码登录" name="1">
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
              <el-form-item prop="username">
                <el-input v-model="loginForm.username" @keyup.enter.native="$focusNext('password')"
                  placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" ref="password" type="password"
                  @keyup.enter.native="handleLogin" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-button :loading="loading" type="primary" @click="handleLogin">登 录
              </el-button>
              <!-- <p class="tip">* 忘记密码请联系技术中心</p> -->
            </el-form>
          </el-tab-pane>

        </el-tabs>
      </div>
    </main>
    <footer v-if="hasFooter">
      <img src="../../assets/images/official.png" alt="">
      <div class="info">
        <p>主办单位：河南省发展和改革委员会</p>
        <!-- <p>技术支持：北京华通人商用信息有限公司</p> -->
      </div>
    </footer>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {
    decrypt,
    encrypt
  } from '@/utils/jsencrypt'

  export default {
    name: 'Login',
    data() {
      return {
        headerHeight: 120,
        footerHeight: 100,
        hasFooter: true,
        activeTag: "1",
        cookiePassword: '',
        loginForm: {
          username: '',
          password: '',
          rememberMe: false,
          uuid: ''
        },
        loginRules: {
          username: [{
            required: true,
            trigger: 'blur',
            message: '用户名不能为空'
          }],
          password: [{
            required: true,
            trigger: 'blur',
            message: '密码不能为空'
          }]
        },
        loading: false,
        redirect: undefined,
        openRegister: false
      }
    },
    computed: {
      // 获取布局配置信息
      getThemeConfig() {
        return this.$store.state.themeConfig.themeConfig
      }
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    created() {
      this.getCookie()
      // 开启注册
      this.getConfigValue('sys.account.register').then((res) => {
        if (res.data && 'Y' == res.data) {
          this.openRegister = true
        }
      })
    },
    methods: {
      getCookie() {
        const username = Cookies.get('username')
        const password = Cookies.get('password')
        const rememberMe = Cookies.get('rememberMe')
        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.loginForm.rememberMe) {
              Cookies.set('username', this.loginForm.username, {
                expires: 30
              })
              Cookies.set('password', encrypt(this.loginForm.password), {
                expires: 30
              })
              Cookies.set('rememberMe', this.loginForm.rememberMe, {
                expires: 30
              })
            } else {
              Cookies.remove('username')
              Cookies.remove('password')
              Cookies.remove('rememberMe')
            }
            this.$store.dispatch('Login', this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || '/'
              }).catch(() => {})
            }).catch(() => {
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .henan-login-web {
  	background-image: url("../../assets/images/bg.webp");
  	background-size: 100%;
  	background-repeat: no-repeat;
  	background-color: #000;


  	&.white {
  		header {
  			height: 120px;

  			.logo {
  				color: #30519B;

  				h1 {
  					font-size: 32px;
  					font-weight: 600;
  				}

  				p {
  					color: rgba(48, 81, 155, .5);
  					margin-top: 4px;
  					font-size: 14px;
  				}
  			}
  		}
  	}

  	&.blue {
  		header {
  			height: 64px;
  			background: rgba(48, 81, 155, 1);

  			.logo {
  				color: #fff;

  				h1 {
  					font-size: 24px;
  					font-weight: 600;
  					color: #FFFFFF;
  				}

  				p {
  					display: none;
  				}
  			}

  			.right {
  				.user {
  					.info {
  						p:first-child {
  							color: #FFFFFF;
  						}

  						p:last-child {
  							color: rgba(255, 255, 255, .6);
  						}
  					}
  				}
  			}
  		}

  	}
  }

  header {
  	box-sizing: border-box;
  	width: 100%;

  	padding: 0 40px;
  	background: #FFFFFF;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;

  	.menus {
  		margin-left: 28px;
  		flex: 1;
  		border: none;
  		background: none;

  		::v-deep .el-submenu {
  			&.is-opened {
  				.el-submenu__title {
  					background: none !important;
  				}
  			}

  			&.is-active {
  				.el-submenu__title {
  					color: rgba(255, 255, 255, 1);
  				}
  			}

  			.el-submenu__title {
  				font-size: 16px;
  				font-weight: 400;
  				color: rgba(255, 255, 255, .7);
  				border: none;
  				padding: 0 12px;

  				.el-submenu__icon-arrow {
  					display: none;
  				}

  				&:hover {
  					background: none;
  					color: rgba(255, 255, 255, 1);
  				}
  			}

  		}


  	}


  	.right {
  		cursor: pointer;

  		.user {
  			display: flex;
  			align-items: center;

  			.info {
  				margin-right: 16px;
  				text-align: right;

  				p:first-child {
  					font-size: 16px;
  					font-weight: 600;
  					color: #262626;
  				}

  				p:last-child {
  					margin-top: 4px;
  					font-size: 16px;
  					font-weight: 400;
  					color: #262626;
  				}
  			}

  			.avatar {
  				border-radius: 3px;
  				width: 48px;
  				height: 48px;
  			}
  		}

  	}
  }

  footer {
  	box-sizing: border-box;
  	display: flex;
  	align-items: center;
  	padding: 0 120px;
  	height: 100px;
  	//background-color: #000;

  	img {
  		margin-right: 16px;
  		width: 40px;
  		height: 48px;
  	}

  	.info {
  		font-size: 12px;
  		font-weight: 400;
  		color: rgba(255, 255, 255, .6);

  		p {
  			margin-bottom: 4px;

  			&:last-child {
  				margin-bottom: 0;
  			}
  		}
  	}
  }

  .login-btn {
  	padding: 0;
  	width: 88px;
  	height: 40px;
  	background: #0A5DD3;
  	border: none;
  	border-radius: 0;
  	font-size: 14px;
  	font-weight: 500;
  }

  .login {
  	margin: 0 auto;
  	height: 100%;
  	width: 360px;
  	display: flex;
  	align-items: center;
  	//justify-content: center;

  	.tip {
  		margin-top: 16px;
  		font-size: 12px;
  		font-weight: 400;
  		color: rgba(255, 255, 255, .5);
  	}

  	.u-key {
  		box-sizing: border-box;
  		width: 360px;
  		height: 128px;
  		background: rgba(255, 255, 255, 0.3);
  		border-radius: 6px;
  		border: 1px dashed rgba(255, 255, 255, 0.7);
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;

  		img {
  			width: 64px;
  			height: 64px;
  		}

  		p {
  			margin-top: 12px;
  			font-size: 12px;
  			font-weight: 400;
  			color: #FFFFFF;
  		}
  	}

  	::v-deep .el-tabs__header {
  		margin-bottom: 24px;

  		.el-tabs__item {
  			font-size: 16px;
  			font-weight: 400;
  			color: rgba(255, 255, 255, .5);
  			padding: 0 16px 0 0;
  			height: auto;
  			line-height: normal;

  			&.is-active {
  				border-bottom: none;
  				font-size: 16px;
  				font-weight: 600;
  				color: #FFFFFF;
  			}
  		}

  		.el-tabs__active-bar,
  		.el-tabs__nav-wrap::after {
  			display: none;
  		}
  	}

  	::v-deep .el-form-item {
  		margin-bottom: 16px;
  	}

  	::v-deep .el-input__inner {
  		width: 360px;
  		height: 48px !important;
  		background: rgba(255, 255, 255, 0.3);
  		border-radius: 6px;
  		border: 1px solid rgba(255, 255, 255, 0.7);
  		font-size: 16px;
  		font-weight: 500;
  		color: #FFFFFF;

  		&:focus {
  			background: #fff;
  			color: #262626;
  		}
  	}

  	::v-deep .el-button {
  		margin-top: 16px;
  		font-size: 16px;
  		width: 360px;
  		height: 48px;
  		background: #0A5DD3;
  		border: none;
  		border-radius: 6px;

  		&[disabled] {
  			opacity: 0.5;
  		}
  	}

  }

  .phoneCodeBox {
  	width: 100%;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;

  	.phoneCodeInput {
  		width: 220px;

  		::v-deep .el-input__inner {
  			width: 200px;
  		}
  	}

  	.phoneCodeBtn {
  		width: 140px;
  		margin-top: 0;
  	}
  }

  .global-help {
  	display: block;
  	background-size: 100%;



  	&.admin {
  		z-index: 99;
  		width: 119px;
  		height: 48px;
  		position: fixed;
  		right: 40px;
  		bottom: 20px;
  		// background-image: url("../../assets/images/global-help-1.png");

  		img {
  			width: 200px;
  			margin-left: -45px;
  			margin-top: -250px;
  		}
  	}

  	// &.front {
  	// 	flex-shrink: 0;
  	// 	display: block;
  	// 	height: 36px;
  	// 	width: 126px;
  	// 	background-image: url("../../assets/images/global-help-2.png");
  	// }
  }
</style>
